package cn.liu.jetpack_demo.pages

import android.util.Log
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.text.selection.DisableSelection
import androidx.compose.foundation.text.selection.SelectionContainer
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.ParagraphStyle
import androidx.compose.ui.text.SpanStyle
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.buildAnnotatedString
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.withStyle
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.navigation.NavController
import androidx.navigation.compose.rememberNavController
import cn.liu.jetpack_demo.api.UserApi
import cn.liu.jetpack_demo.components.CoilImageBox
import cn.liu.jetpack_demo.components.ExpandableCard
import cn.liu.jetpack_demo.components.GoogleButton
import cn.liu.jetpack_demo.components.LcCacheImage
import cn.liu.jetpack_demo.components.PasswordInputArea
import cn.liu.jetpack_demo.routes.Screen

@ExperimentalMaterial3Api
@Composable
fun SettingsPage(navController: NavController) {

  val userList = UserApi.getUsers()

  Column(
    verticalArrangement = Arrangement.Center,
    horizontalAlignment = Alignment.CenterHorizontally,
    modifier = Modifier
      .fillMaxSize()
      .background(Color.Green),

    ) {
    Text(
      text = "Setting",
      modifier = Modifier
        .background(Color.Red)
        .padding(16.dp)
        .clickable {
          navController.navigate(route = Screen.Detail.route)
        },
      color = Color.White,
      fontWeight = FontWeight.Bold,
      fontSize = MaterialTheme.typography.headlineLarge.fontSize
    )
    CustomText(MaterialTheme.colorScheme.primary)
    CustomText2()
    CoilImageBox("https://avatars.githubusercontent.com/u/14994036?v=4")
    LcCacheImage(
      url = "https://avatars.githubusercontent.com/u/14994036?v=4",
      width = 100.dp,
      height = 100.dp
    )
    PasswordInputArea(onChange = {
      Log.d("PasswordInputArea", "onChange: $it")
    })
    GoogleButton(onClick = {
      Log.d("GoogleButton", "onClick")
    })

    ExpandableCard(
      title = "Test Title",
      content = "此项目致力于帮助大家更好的理解和快速上手 Jetpack Compose 框架, 更多的部分是为了补充官网可能没有介绍的东西。\n" +
        "\n" +
        "由于 Jetpack Compose 正在快速发展中，本文档的部分内容可能已经过时，你可以参阅最新官方文档查看最新更新。也欢迎提出 PR 帮助我们更新内容。\n" +
        "\n" +
        "未来可能会添加一些样例 app（开发中）"
    )


  }
}

@Composable
fun CustomText(color: Color) {
  Text(
    buildAnnotatedString {
      withStyle(style = ParagraphStyle(textAlign = TextAlign.Center)) {
        withStyle(
          style = SpanStyle(color = color, fontSize = 30.sp, fontWeight = FontWeight.Bold)
        ) {
          append("A")
        }
        append("B")
        append("C")
        append("D")
      }
    },
    modifier = Modifier
      .background(Color.White)
      .padding(10.dp),
    style = TextStyle(fontSize = 20.sp)
  )
}

@Composable
fun CustomText2() {
  SelectionContainer {
    Column(modifier = Modifier.padding(top = 50.dp)) {
      Text(text = "Hello World!")
      Spacer(Modifier.height(20.dp))
      DisableSelection {
        Text(text = "Hello World!")
      }
      Spacer(Modifier.height(20.dp))
      Text(text = "Hello World!")
    }
  }
}

@ExperimentalMaterial3Api
@Composable
@Preview
fun SettingsPagePreview(showBackground: Boolean = true) {
  SettingsPage(navController = rememberNavController())
}

